<template>
  <div class="personal-container">
    <el-card class="personal-info">
      <p class="about">About Me</p>
      <div>
        <div class="personal-dog-box">
          <span class="admin-title">Welcome Admin</span>
          <div class="personal-dog"></div>
        </div>
      </div>
      <p class="power">Super Admin</p>
      <p class="adminName">admin</p>
      <div class="introduction">
        <i class="el-icon-reading"> Eductione</i>
        <hr style="border-color: #8c8c8c;" />
        <p class="introduction-text">JS in Computer Science from the University of Technology</p>
      </div>
      <div class="progress">
        <i class="el-icon-tickets"> Skills</i>
        <hr style="border-color: #c8c8c8;" />
        <p class="pro">Vue</p>
        <el-progress :percentage="50"></el-progress>
        <p class="pro">Css</p>
        <el-progress :percentage="18"></el-progress>
        <p class="pro">Javascript</p>
        <el-progress :percentage="12"></el-progress>
        <p class="pro">ESlint</p>
        <el-progress :percentage="100" status="success"></el-progress>
      </div>
    </el-card>
    <el-card class="personal-content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="Activity" name="Activity">
          <div class="post">
            <div class="postInfo">
              <img class="head-image" src="https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg?imageView2/1/w/80/h/80">
              <span>
                <span class="username">
                  Iron Man
                  <br />
                  <span class="userinfo-item">Schared publicly - 7:30 PM today</span>
                </span>
              </span>
            </div>
            <p class="post-content">Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen fans.</p>
            <i class="el-icon-share share">Share</i>
            <i class="unlike el-icon-star-on" @click="handelLike"></i>
          </div>
          <div class="post">
            <div class="postInfo">
              <img class="head-image" src="https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg?imageView2/1/w/80/h/80">
              <span>
                <span class="username">
                  Captain American
                  <br />
                  <span class="userinfo-item">Send you a Message - yesterday</span>
                </span>
              </span>
            </div>
            <p class="post-content">Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie Sheen fans.</p>
            <i class="el-icon-share share">Share</i>
            <i class="unlike el-icon-star-on" @click="handelLike"></i>
          </div>
          <div class="post">
            <div class="postInfo">
              <img class="head-image" src="https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg?imageView2/1/w/80/h/80">
              <span>
                <span class="username">
                  Splider Man
                  <br />
                  <span class="userinfo-item">Posted 4 photos - 2 day ago</span>
                </span>
              </span>
            </div>
            <p class="post-content" style="width: 98%;">
              <el-carousel :interval="4000" type="card" height="200px">
                  <el-carousel-item v-for="(item, i) in carouselList" :key="i">
                    <img class="medium" :src="item" />
                </el-carousel-item>
              </el-carousel>
            </p>
            <i class="el-icon-share share">Share</i>
            <i class="unlike el-icon-star-on" @click="handelLike"></i>
          </div>
        </el-tab-pane>
        <el-tab-pane label="TimeLine" name="TimeLine">
          <el-timeline>
              <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                  <h4>Update Github template</h4>
                  <p>songyuening committed 2018/4/12 20:46</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/3" placement="top">
                <el-card>
                  <h4>Update Github template</h4>
                  <p>songyuening committed 2018/4/3 20:46</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <el-card>
                  <h4>Update Github template</h4>
                  <p>songyuening committed 2018/4/2 20:46</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/1" placement="top">
                <el-card>
                  <h4>Update Github template</h4>
                  <p>songyuening committed 2018/4/1 20:46</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="Account" name="Account">
          <el-form :model="adminInfo" ref="addminFormRef">
            <el-form-item label="Name">
              <el-input placeholder="Admin Name" v-model="adminInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="Email">
              <el-input placeholder="Admin Email" v-model="adminInfo.email"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="update">Update</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'Activity',
      carouselList: [
        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg?imageView2/2/h/440',
        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg?imageView2/2/h/440',
        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg?imageView2/2/h/440',
        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg?imageView2/2/h/440'
      ],
      adminInfo: {
        name: '',
        email: ''
      }
    }
  },
  created() {
  },
  mounted() {
    this.animate()
  },
  methods: {
    animate() {
      const dog = document.querySelector('.personal-dog-box')
      dog.addEventListener('mousemove', function() {
        this.lastChild.style.transformOrigin = '100% 50%'
        this.lastChild.style.transform = 'rotate(-90deg)'
      })
      dog.addEventListener('mouseout', function() {
        this.lastChild.style.transformOrigin = '100% 50%'
        this.lastChild.style.transform = 'rotate(0deg)'
      })
    },
    handleClick() {
      console.log(this.activeName)
    },
    handelLike($event) {
      const isLike = $event.path[0].classList[0]
      if(isLike === 'like') {
        $event.path[0].classList = 'unlike' + ' ' + 'el-icon-star-on'
      }else if(isLike === 'unlike') {
        $event.path[0].classList = 'like' + ' ' + 'el-icon-star-on'
      }
    },
    update() {
      this.$message({ type: 'success', message: '提交成功', duration: 2000 })
    }
  }
}
</script>

<style lang="less" scoped>
  @import '../plugins/timeline/timeline.css';
  @import '../plugins/timeline-item/timeline-item.css';
  .personal-container {
    display: flex;
    align-items:flex-start;
    .personal-info {
      flex: 1;
    }
    .personal-content {
      flex: 3;
      margin: 0 20px;
    }
    .about {
      margin: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
  }
  .personal-dog-box {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 20px auto;
    border: 10px solid #eee;
    border-radius: 50%;
    .admin-title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
      color: #55ffff;
      z-index: 0;
    }
  }
  .personal-dog {
    position: relative;
    height: 101%;
    width: 101%;
    border-radius: 50%;
    background: url("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif") no-repeat center center;
    background-size: 100% 100%;
    transition: all .2s;
    z-index: 9;
  }
  .power {
    text-align: center;
    font-weight: 600;
  }
  .adminName {
    text-align: center;
    color: #a0a0a0;
  }
  .introduction {
    margin-top: 20px;
  }
  .introduction-text {
    color: #888;
    font-size: 14px;
  }
  .progress {
    margin-top: 20px;
    height: 220px;
    background-color: transparent;
    box-shadow: none;
  }
  .pro {
    color: #666;
    font-size: 14px;
  }
  .head-image {
    margin-right: 10px;
    height: 40px;
    width: 40px;
    border-radius:  50%;
  }
  .postInfo {
    display: flex;
    align-items: center;
  }
  .userinfo-item {
    font-size: 12px;
    color: #30B08F;
  }
  .post-content {
    margin: 10px 0 20px 0;
    font-size: 14px;
    color: #666;
    text-indent: 2em;
  }
  .share {
    margin-right: 40px;
    font-size: 14px;
    color: #00aaff;
    cursor: pointer;
  }
  .unlike {
    color: #eee;
  }
  .like {
    color: #ff0000;
  }
  .el-icon-star-on {
    font-size: 18px;
    cursor: pointer;
  }
  .post {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
</style>
